<template>
  <div class="Login">
    <van-nav-bar title="账号登录" @click-left="$router.go(-1)" left-arrow />
    <van-form :show-error="false" >
      <van-field
        v-model="data.username"
        placeholder="请输入账号"
        required
        :rules="[{ required: true, pattern: /^[a-zA-Z0-9_-]{4,8}$/ }]"
        :center="true"
      />
      <van-field
        v-model="data.password"
        type="password"
        placeholder="请输入密码"
        required
        :rules="[{ required: true, pattern: /^\d{6}$/ }]"
        :center="true"
      />
      <div style="margin: 16px">
        <van-button
          block
          type="info"
          native-type="submit"
          size="large"
          color="#1cb676"
          @click="btn"
          :disabled="disabled"
          :loading="disabled"
          >提交</van-button
        >
      </div>
    </van-form>
    <div class="registe">
      <router-link to="/registe">还没有账号，快去注册~~~</router-link>
    </div>
  </div>
</template>

<script>
import { LoginRequest } from '@/api'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      data: {
        username: '',
        password: ''
      },
      disabled: false
    }
  },
  methods: {
    ...mapActions(['LoginActions']),
    async btn () {
      if (this.data.username === '' || this.data.password === '') {
        this.$toast('用户名格式5-8位的字母或者数字')
        return
      }
      this.disabled = true
      this.LoginActions(this.data)
      try {
        const res = await LoginRequest(this.data)
        if (res.data.status === 200) {
          this.$bus.$emit('loading')
          // 登录成功跳转页面
          this.$router.replace('/layout')
          // 将状态转为true即为登录状态
          this.$store.state.LoginState = true
          this.$toast.success(res.data.description)
        } else {
          this.$toast(res.data.description)
        }

        this.disabled = false
      } catch (err) {
        this.disabled = false
      }
    }
  }
}
</script>

<style lang="less">
.van-nav-bar {
  background-color: #21b97a;
  .van-ellipsis {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
.van-cell {
  padding-top: 40px;
  height: 80px;
  font-size: 17px;
  border-bottom: 0.1px solid rgb(235, 235, 235);
}
.registe {
  margin: 15px 100px;
  font-size: 14px;
  a {
    color: #333;
  }
}
</style>
